<template>
  <div>
    <h2>深入v-model</h2>
    <input type="text" v-model="msg">
    <span>{{msg}}</span>

    <h2>v-model底层实现原理</h2>
    <input type="text" placeholder="与v-model功能一样" :value="msg1" @input="handler"/>
    <span>{{msg1}}</span>
    <hr>

    <h2>父组件{{msg2}}</h2>
    <!-- props  自定义事件   -->
    <!-- <CustomInput :value="msg2" @input="inputHandler"></CustomInput> -->
    <!-- 下面的代码 与 上面的代码 原理相同 -->
    <CustomInput v-model="msg2"></CustomInput>


<!-- element-ui提供的组件 -->
<h3>{{msg3}}</h3>
<el-input size="mini" v-model="msg3"></el-input>


    <br>
  </div>
</template>

<script type="text/ecmascript-6">
  import CustomInput from './CustomInput.vue'
  export default {
    name: 'ModelTest',
    components: {
      CustomInput
    },
    data(){
      return {
        msg:'杀死比尔',
        msg1:'杀死比尔1 ',
        msg2:'杀死比尔2',
        msg3:'杀死比尔3'

      }
    },
    methods:{
      handler(e){
        this.msg1 = e.target.value;

      },
      inputHandler(params){
        this.msg2 = params;

      }
    }
  }
</script>
